<!--
 * @Author: Li Zengkun
 * @Date: 2022-07-26 21:28:06
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-07-26 21:39:03
 * @Description: 账户资料
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
    <title>账户资料</title>
</head>

<body>
    <header>
        <a href="#">
            <img src="../img/右箭头.png" alt="">
        </a>
        账户资料
    </header>

    <div class="avator">
        <img src="../img/user/avator.png" alt="">
    </div>
    <ul class="option-list">
        <li class="option">
            <span>昵称</span>
            <input type="text" id="user-name" name="user-name" value="喵喵酱">
        </li>
        <li class="option">
            <span>性别</span>
            <div class="gender-box">
                <label for="man">
                    <input value="1"  type="radio" id="man" name="gender">男
                </label>
                <label for="woman">
                    <input value="0" checked type="radio" id="woman" name="gender">女
                </label>
            </div>
        </li>
        <li class="option">
            <span>手机</span>
            <input type="num" name="phone-num" id="phone-num" value="111111111">
        </li>


    </ul>



    <div class="bottom-btn">保存修改</div>
</body>

<style>
    .avator {
        text-align: center;
        width: 29.33vw;
        height: 29.33vw;
        background-color: #eeeeee;
        border-radius: 50%;
        border: solid 0.27vw #b5b5b5;
        margin: 8vw auto;
        padding: 0;
    }
    
    .avator>img {
        height: 100%;
        width: 100%;
    }
    
    .option-list {
        width: 100%;
    }
    
    .option {
        border-bottom: .13vw solid #eaeaea;
        padding: 4.8vw 3.07vw;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        font-size: 3.73vw;
        color: #333333;
        cursor: pointer;
    }
    
    .option input {
        border: none;
        text-align: right;
        font-size: 3.73vw;
        color: #333333;
    }
    
    .gender-box label {
        margin-left: 5vw;
    }
    
    .gender-box input {
        margin: 0 3vw;
    }
</style>

</html>